<!DOCTYPE html>
<html>
<head>
    <title>Design pattern</title>
    <link rel="stylesheet" href="../web-resources/css/font-awesome.css">
    <style type="text/css">
        
		html {
			height: 100%;
		}
		body {
            background: #DBEDEF;
            background: linear-gradient(top, #DBEDEF, #E5F2F4);
            background: -moz-linear-gradient(top, #DBEDEF, #E5F2F4) no-repeat;
            background: -o-linear-gradient(top, rgb(219,237,239), rgb(166,213,229)) no-repeat;
            background: -webkit-gradient(linear, center top, center bottom, from(#DBEDEF), to(#E5F2F4)) no-repeat;
			filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#DEEFEF', EndColorStr='#E5F2F4', GradientType=0);
			position: relative;
		}
		#frame {
			width: 100%;
			height: 100%;
			position: relative;
			width: 100%;
		}
		#mainContent {
			/*background: none repeat scroll 0 0 #DBEDEF;*/
			padding: 10px 40px;
			/*border: 1px solid #525252;*/
			vertical-align: bottom;
            width: 1000px;
		}
		.page_header_logo {
			float: left;
            position: absolute;
            top: 5px;
            left: 50px;

		}
		.page_header_logo span {
			font-family: cursive;
            letter-spacing: 0px;
			font-size: 42px;
			font-weight: bold;
			margin-right: 1px;
            margin-left: 2px;
            padding: 0px 4px;
            box-shadow: 0 1px 1px rgba(188, 205, 208, 0.1), 0 1px 1px rgba(188, 205, 208, 0.1), 0 -1px 1px 2px rgba(207, 228, 232, 0.4);
            border-radius: 5px;
            background: #DEEFEF;
            background: linear-gradient(top, #DEEFEF, #E5F2F4);
            background: -moz-linear-gradient(top, #DEEFEF, #E5F2F4) no-repeat;
            background: -o-linear-gradient(top, rgb(219,237,239), rgb(166,213,229)) no-repeat;
            background: -webkit-gradient(linear, center top, center bottom, from(#DEEFEF), to(#E5F2F4)) no-repeat;
			filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#DEEFEF', EndColorStr='#E5F2F4', GradientType=0);
		}
        .page_header_logo span[word-stub]{
            margin-left: 10px;
            box-shadow: none;
            background: transparent;
        }
		.page_header_logo span[word-first] {
			color: #66BBCD;

		}
		.page_header_logo span[word-second] {
			/*color: #FED555;*/
			color: #F3C94E;
		}
		.page_header_logo span[word-third] {
			color: #66BBCD;
		}
		.page_header_logo span[word-point] {
			font-size:36px;
			color: #4CA3B4;
            margin-left: -5px;
            box-shadow: none;
            background: transparent;
		}
		.page_header_menu {
			float: right;
			margin-top: 30px;
			margin-right: 10px;
		}

        .page_header_menu span:hover{
            color: #F4C231;
            cursor: pointer;
        }

		.page_header_menu span {
			color: #A8B8B7;
			font-family: arial;
			font-size: 14px;
			font-weight: bold;
			margin-right: 10px;
		}
		.page_header_menu span[log-out] {
			color: #33D0EF;
		}
		
		.page_header{
			height:30px;
			
		}
		.search_box{
			background: none repeat scroll 0 0 #DBEDEF;
			height:90px;
			margin-top:30px;
			border-radius: 10px 10px 10px 10px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2), 0 -1px 1px 3px rgba(207, 228, 232, 0.2);
			padding: 20px 40px 0px;
            color: #85949C;
		}
        .search_box div[header-search]{
            font-size: 22px;
            font-family: cursive;
            font-weight: bold;
            letter-spacing: 2pt;
            float: left;
        }

        .search_box div[header-search-description]{
            font-family: cursive;
            font-size: 12px;

            clear: left;
            padding-top: 3px;
            padding-left: 7px;
        }

        .input_search{
            float: right;
        }

        .input_search input{
            font-family: 'Lato', Calibri, Arial, sans-serif;
            font-size: 13px;
            font-weight: 400;
            display: block;
            width: 180px;
            padding: 5px;
            border: none;
            /*border: 3px solid #4CA3B4; */
            border-radius: 5px;
            box-shadow: 0 1px 12px rgba(76, 163, 180, 0.6);
            margin-left: 100px;
        }
        .input_search input:hover {
            border-color: #F3C94E;
        }


		.content_box{
			background: none repeat scroll 0 0 #FFF;
			height:380px;
			margin-top:-20px;
			border-radius: 4px 4px 4px 4px;
            box-shadow: 0 1px 2px rgba(76, 163, 180, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 1px 1px rgba(76, 163, 180, 0.1);
			padding: 10px;
		}

        #button_search{
            float:left;
            border: none;
            background: transparent;
            margin-left: -32px;
            margin-top: 5px;
            cursor: pointer;
            color: #31D3EF;
        }

        #button_search:hover{
            color: #F4C231;
        }
		
		.content_box_blue{
			width: 300px;
			height: 200px;
			border: 1px solid #696;
			padding: 0px 0;
			text-align: center; width: 200px;
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			border-radius: 8px;
			-webkit-box-shadow: #666 0px 1px 2px;
			-moz-box-shadow: #666 0px 1px 2px;
			box-shadow: #666 0px 1px 2px;
			background: #DEEFEF;
			background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DEEFEF), to(#E5F2F4));
			background: -webkit-linear-gradient(#DEEFEF, #E5F2F4);
			background: -moz-linear-gradient(#DEEFEF, #E5F2F4);
			background: -ms-linear-gradient(#DEEFEF, #E5F2F4);
			background: -o-linear-gradient(#DEEFEF, #E5F2F4);
			background: linear-gradient(#DEEFEF, #E5F2F4);
			-pie-background: linear-gradient(#DEEFEF, #E5F2F4);
		}
    </style>
</head>
<body>
<div id="frame">
    <div id="mainContent">
        <div class="page_header">
            <div class="page_header_logo">
             <span word-first>W</span><span word-first>e</span><span word-first>b</span><span word-stub></span>
             <span word-second>C</span><span word-second>a</span><span word-second>r</span><span word-second>d</span><span word-stub></span>
             <span word-third>S</span><span word-third>o</span><span word-third>r</span><span word-third>t</span><span word-third>i</span><span word-third>n</span><span word-third>g</span>
             <span word-point>.</span>
            </div>
            <div class="page_header_menu">
                <span>Home</span><span>Search</span><span>Results</span><span log-out>Log Out</span>
            </div>
        </div>
		<div class="search_box">
          <!--div header-search>Search from card sorting.</div-->
          <div class="input_search"><input type="text" placeholder="Just enter" style="float: left"><button id="button_search" style=""><i class="icon-share-alt icon-large"></i></button></div>
          <!--div header-search-description>It's a fast way to find from completed research.</div-->
        </div>
		<div class="content_box">
			<div class="content_box_blue"></div>
        </div>

    </div>
</div>

</body>
</html>